<template>
  <div class="app-container zcfg">
    <div class="newTextBox u-base-fg">
      <div class="newTit u-prim-text">
        <!-- <span>NEW</span> -->
        <img src="../../assets/images/nwe.png" alt="" />
        {{ tableData?.[0]?.informationName | nullishCoalescing }}
      </div>
      <div class="newCont">
        {{ tableData?.[0]?.informationContent | nullishCoalescing }}
      </div>
      <div class="newLY u-df-st">
        <span>文章来源：{{ tableData?.[0]?.informationPublishPeople | nullishCoalescing }}</span>
        <span class="u-ml10 u-mr10">|</span>
        <span>发布日期：{{ tableData?.[0]?.informationCreateTime | nullishCoalescing }}</span>
      </div>
    </div>
    <div class="newListBox u-base-fg">
      <div class="listTit">
        <div class="u-prim-text">热点新闻</div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :max-height="350"
        :show-header="false"
        @row-click="handlePreview"
      >
        <el-table-column prop="informationName">
          <template slot-scope="scope">
            <span class="icon"></span>
            <span>{{ scope.row.informationName | nullishCoalescing }}</span>
          </template>
        </el-table-column>
        <el-table-column width="500">
          <template slot-scope="scope">
            <div class="u-df-ed">
              <span>文章来源：{{ scope.row.informationPublishPeople | nullishCoalescing }}</span>
              <span class="u-ml10 u-mr10">|</span>
              <span>发布日期：{{ scope.row.informationCreateTime | nullishCoalescing }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <el-dialog
      :visible.sync="open"
      width="90%"
      top="50px !important"
      title="查看"
      append-to-body
      class="projInfo-dialog"
    >
      <iframe :src="openUrl" width="100%" height="100%" style="border: 0" />
    </el-dialog>
  </div>
</template>

<script>
import { forEach } from 'lodash-es';
import { useGlobalState } from '@/store/globalState.js';
import { getNewsInfor, getDownloadPath } from '@/api/index.js';
export default {
  name: 'rdzx',
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        informationType: 'HOTSPOT',
      },
      open: false,
      openUrl: '',
    };
  },
  activated() {
    this.getList();
  },
  methods: {
    /** 搜索按钮操作 */
    getList() {
      this.loading = true;
      getNewsInfor(this.queryParams)
        .then(response => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
          if (this.$route.query.id) {
            forEach(this.tableData, n => {
              if (n.id == this.$route.query.id) {
                getDownloadPath(n.url).then(res => {
                  this.openUrl = useGlobalState().globalState.fileUrl + res?.data?.url ?? '';
                  this.open = true;
                });
              }
            });
          }
        })
        .catch(err => {
          this.loading = false;
          this.$message.error(err);
        });
    },
    handlePreview(row) {
      getDownloadPath(row.url).then(res => {
        this.openUrl = useGlobalState().globalState.fileUrl + res?.data?.url ?? '';
        this.open = true;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.newTextBox {
  width: 100%;
  height: 260px;
  box-shadow: 0px 1px 2px 1px rgba(37, 37, 37, 0.08);
  opacity: 1;
  padding: 20px;
  box-sizing: border-box;
}
.newTit {
  font-size: 24px;
  font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
  font-weight: 600;
  // color: #d2e5f5;
  line-height: 32px;
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;
  span {
    font-size: 30px;
    color: #5bd4ff;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana,
      sans-serif;
  }
  img {
    position: relative;
    top: 5px;
  }
}
.newCont {
  margin-top: 10px;
  font-size: 16px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #999;
  line-height: 32px;
}
.newLY {
  font-size: 16px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #545a6c;
  line-height: 32px;
  position: relative;
  top: 45px;
}
.newListBox {
  margin-top: 15px;
  width: 100%;
  height: calc(100% - 275px);
  box-shadow: 0px 1px 2px 1px rgba(37, 37, 37, 0.08);
  opacity: 1;
  padding: 20px;
  box-sizing: border-box;
}
.listTit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 0 10px 0;
  box-sizing: border-box;
  border-bottom: 1px solid #2a3c60;
  div {
    font-size: 18px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    line-height: 0px;
  }
}
.icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #87a5bc;
  border-radius: 7px 7px 7px 7px;
  opacity: 0.6;
  margin-right: 10px;
}
</style>
<style lang="scss">
.projInfo-dialog {
  .el-dialog__body {
    height: calc(100vh - 155px);
    max-height: calc(100vh - 155px);
  }
}
</style>
